<!-- toolbar -->
<template>
    <div class="item-wrap" v-if="showToolBar">
        <div>
            <el-dropdown class="item" v-for="(item,index) in toolMenu" :key="index" trigger="click">
                <span class="el-dropdown-link">{{item.name}}</span>
                <template #dropdown>
                    <el-dropdown-menu v-for="(i, idx) in item.child" :key="idx">
                        <img class="icon" :src="i.icon" alt="">
                        <el-dropdown-item :divided="i.divided" @click="clickMenuHandler(i)">{{i.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <svg-icon icon="icon-close" color="white" @click="closeHandler"></svg-icon>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, toRefs } from 'vue'

const emit = defineEmits(['clickMenuItemEvent', 'closeEvent']) //定义emit事件
const showToolBar = ref(true);
// 获取静态资源url
const getImageUrl = function(name: String) {
  return new URL(`../../assets/images/toolBar/${name}.png`, import.meta.url).href
}
const toolMenu = reactive(
     [ 
        { 
            name: '文件', 
            child: [
                { name: '新建方案', icon: getImageUrl('icon_ui_model'), path: '', type: '', divided: false },
                { name: '新建模块', icon: getImageUrl('icon_ui_model'), path: '', type: '', divided: false },
                { name: '新建Model', icon: getImageUrl('icon_ui_model'), path: '', type: '', divided: false },
                { name: '新建UI Form', icon: getImageUrl('icon_ui_form'), path: '', type: '', divided: false },
                { name: '新建数据字典', icon: getImageUrl('icon_data_dict'), path: '', type: '', divided: false },
                { name: '新建参照', icon: getImageUrl('icon_refer'), path: '', type: '', divided: false },
                { name: '打开方案', icon: getImageUrl('icon_open_project'), path: '', type: '', divided: true },
                { name: '打开模块', icon: getImageUrl('icon_open_project'), path: '', type: '', divided: true },
                { name: '保存', icon: getImageUrl('icon_save'), path: '', type: '', divided: false },
                { name: '保存所有', icon: getImageUrl('icon_save_all'), path: '', type: '', divided: false },
                { name: '另存为', icon: getImageUrl('icon_save_as'), path: '', type: '', divided: false },
                { name: '退出', icon: getImageUrl('icon_exit'), path: '', type: '', divided: true },
            ]
        },
        { 
            name: '工具', 
            child: [
                { name: '上传地址', icon: getImageUrl('icon_upload_address'), path: '', type: '', divided: false },
                { name: '数据源', icon: getImageUrl('icon_data_source'), path: '', type: '', divided: false },
                { name: '上传文件', icon: getImageUrl('upload_file'), path: '', type: '', divided: false },
                { name: '上传全部', icon: getImageUrl('icon_upload_all'), path: '', type: '', divided: false },
                { name: '发布文件', icon: getImageUrl('icon_publish_file'), path: '', type: '', divided: true },
                { name: '发布全部', icon: getImageUrl('icon_publish_all'), path: '', type: '', divided: false },
                { name: '生成代码', icon: getImageUrl('icon_create_code'), path: '', type: '', divided: false },
                { name: '生成全部', icon: getImageUrl('icon_create_all'), path: '', type: '', divided: false },
            ]
        },
        { 
            name: '帮助', 
            child: [
                { name: '设计指南', icon: '', path: '', type: '', divided: false },
                { name: '个性化', icon: '', path: '', type: '', divided: false },
                { name: '关于XRD', icon: '', path: '', type: '', divided: false },
            ]
        }
    ]
)



// 点击菜单
const clickMenuHandler = function(e: any) {
    emit('clickMenuItemEvent', e)
}
const closeHandler = function() {
    showToolBar.value = false
    emit('closeEvent')
}





</script>

<style scoped lang="scss">
.el-dropdown__popper .el-dropdown-menu {
    display: flex;
    align-items: center;
    .icon {
        width: 20px;
        height: 20px;
    }
}
.item-wrap {
    padding: 0 10px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #3C3C3C;
    .item {
        padding: 10px 10px;
        width: 50px;
        color:#fff;
        text-align: center;
        cursor: pointer;
    }
    .close {
        color: #fff;
        float: right;
        cursor: pointer;
    }
}
</style>
